<template>
  <div class="contactsInfo">
    <van-nav-bar
        left-arrow
        @click-left="handleClickLeft"
        :title="$t('联系人信息')"
    >
    </van-nav-bar>

    <div class="tab_progress">
      <span style="vertical-align: middle;background-color: #FFE1AD;padding: 10px;border-radius: 20px">Step 3</span>
    </div>
    <!--     担保人信息-->
    <div class="wrapper">
      <div class="wrapper_title">
          {{ $t('担保人信息') }}
      </div>
      <div class="cell_content_list">
        <!--      选择与我的关系-->
        <div class="cell_content_item" @click="relationClick">
          <div class="text">
            {{ $t('关系') }}
          </div>
          <div style="position: relative">
            <input class="input" @blur="confirmPoint(1)" v-model="contactscolFourRelation_text" :readonly="true" :placeholder="$t('请选择担保人关系')"/>
            <img class="input_icon" src="../../assets/my/input_right.png">
          </div>
        </div>
        <!--        姓名-->
        <div class="cell_content_item">
          <div class="text">
            {{ $t('name') }}
          </div>
          <input class="input" v-model="contactscolFourName"
                 @blur="confirmPoint(2)"
                 :placeholder="$t('请输入担保人姓名')"/>
        </div>
        <!--        联系电话-->
        <div class="cell_content_item">
          <div class="text">
            {{ $t('联系电话') }}
          </div>
          <input class="input" type="tel" maxlength="13" onkeyup="value=value.replace(/[^\d]/g,'')"
                 @blur="confirmPoint(3)"
                 v-model="contactscolFourPhone"
                 :placeholder="$t('请输入担保人手机号码')">
        </div>
      </div>

    </div>
    <!--      其他联系人1-->
    <div class="wrapper">
      <div class="wrapper_title">
        {{ $t('联系人1') }}
      </div>
      <div class="cell_content_list" style="margin-top: 10px">
        <!--      选择与我的关系-->
        <div class="cell_content_item" @click="relationsSpareClick">
          <div class="text">
            {{ $t('关系') }}
          </div>
          <div style="position: relative">
            <input class="input" @blur="confirmPoint(4)" v-model="relation_spare_text" :readonly="true" :placeholder="$t('请选择关系')"/>
            <img class="input_icon" src="../../assets/my/input_right.png">
          </div>
        </div>
        <!--        姓名-->
        <div class="cell_content_item">
          <div class="text">
            {{ $t('name') }}
          </div>
          <input class="input" v-model="name"
                 @blur="confirmPoint(5)"
                 :placeholder="$t('请输入姓名')"/>
        </div>
        <!--        联系电话-->
        <div class="cell_content_item">
          <div class="text">
            {{ $t('联系电话') }}
          </div>
          <input class="input"
                 @blur="confirmPoint(6)"
                 v-model="mobile" type="tel" maxlength="13"
                 onkeyup="value=value.replace(/[^\d]/g,'')" :placeholder="$t('请输入电话')"/>
        </div>
      </div>
    </div>
    <!--      其他联系人2-->
    <div class="wrapper">
      <div class="wrapper_title">
          {{ $t('联系人2') }}
      </div>
      <div class="cell_content_list" style="margin-top: 10px">
        <!--      选择与我的关系-->
        <div class="cell_content_item" @click="relationsTwoClick">
          <div class="text">
            {{ $t('关系') }}
          </div>
          <div style="position: relative">
            <input class="input" @blur="confirmPoint(7)" v-model="relationsTwoText" :readonly="true" :placeholder="$t('请选择关系')"/>
            <img class="input_icon" src="../../assets/my/input_right.png">
          </div>
        </div>
        <!--        姓名-->
        <div class="cell_content_item">
          <div class="text">
            {{ $t('name') }}
          </div>
          <input class="input"
                 @blur="confirmPoint(8)"
                 v-model="name_spare"
                 :placeholder="$t('请输入姓名')"/>
        </div>
        <!--        联系电话-->
        <div class="cell_content_item">
          <div class="text">
            {{ $t('联系电话') }}
          </div>
          <input class="input"
                 @blur="confirmPoint(9)"
                 v-model="mobile_spare" type="tel" maxlength="13"
                 onkeyup="value=value.replace(/[^\d]/g,'')" :placeholder="$t('请输入电话')"/>
        </div>
      </div>
    </div>
    <!--      其他联系人3-->
    <div class="wrapper">
      <div class="wrapper_title">
        {{ $t('联系人3') }}
      </div>
      <div class="cell_content_list" style="margin-top: 10px">
        <!--      选择与我的关系-->
        <div class="cell_content_item" @click="relationsThreeClick">
          <div class="text">
            {{ $t('关系') }}
          </div>
          <div style="position: relative">
            <input class="input" @blur="confirmPoint(10)" v-model="relationsThreeText" :readonly="true" :placeholder="$t('请选择关系')"/>
            <img class="input_icon" src="../../assets/my/input_right.png">
          </div>
        </div>
        <!--        姓名-->
        <div class="cell_content_item">
          <div class="text">
            {{ $t('name') }}
          </div>
          <input class="input" @blur="confirmPoint(11)" v-model="contactscolThreeName"
                 :placeholder="$t('请输入姓名')"/>
        </div>
        <!--        联系电话-->
        <div class="cell_content_item">
          <div class="text">
            {{ $t('联系电话') }}
          </div>
          <input class="input" @blur="confirmPoint(12)" v-model="contactscolThreePhone" type="tel" maxlength="13"
                 onkeyup="value=value.replace(/[^\d]/g,'')" :placeholder="$t('请输入电话')"/>
        </div>
      </div>
    </div>
    <!--    联系人关系1-->
    <van-action-sheet v-model:show="relationShow">
      <van-picker @confirm="relationConfirm" @cancel="relationShow = false"
                  :columns-field-names="{  text: 'value'}"
                  :columns="selectDataOne"/>
    </van-action-sheet>
    <!-- 联系人关系2-->
    <van-action-sheet v-model:show="relationsSpareShow">
      <van-picker @confirm="relationsSpareConfirm" @cancel="relationsSpareShow = false"
                  :columns-field-names="{  text: 'value'}"
                  :columns="selectDataTwo"/>
    </van-action-sheet>
    <!-- 联系人关系3-->
    <van-action-sheet v-model:show="relationsTwoShow">
      <van-picker @confirm="relationsTwoConfirm" @cancel="relationsTwoShow = false"
                  :columns-field-names="{  text: 'value'}"
                  :columns="selectDataThree"/>
    </van-action-sheet>
    <!-- 联系人关系4-->
    <van-action-sheet v-model:show="relationsThreeShow">
      <van-picker @confirm="relationsThreeConfirm" @cancel="relationsThreeShow = false"
                  :columns-field-names="{  text: 'value'}"
                  :columns="selectDataFour"/>
    </van-action-sheet>

    <van-popup v-model:show="dialogRetentionShow">
      <template #default>
        <div class="dialog_body">
          <div class="content_text">Application is successful immediately
            <p class="active">Get your money instantly in just 2 steps</p>
            Do you really want to quit?
          </div>
          <div style="margin-top: 20px;text-align: center">
            <van-button type="primary" style="width: 80%" @click="dialogRetentionShow = false" round>{{ $t('继续申请') }}</van-button>
            <van-button class="reject_btn" @click="$router.replace('/hScmlvxSUkDQ/UjRzDSClllpS')" round>
              {{ $t('残忍拒绝') }}
            </van-button>
          </div>
        </div>
      </template>
    </van-popup>
    <div style="text-align: center;margin: 30px 0">
      <van-button class="confirm" type="primary" @click="confirm" round>{{ $t('下一步') }}</van-button>
    </div>
  </div>
</template>

<script>
import {ref, toRefs, reactive, onMounted} from 'vue'
import {useI18n} from 'vue-i18n'
import {useRoute, useRouter} from 'vue-router'
import {Dialog, Toast} from 'vant'
import {personalInfoSelect, saveContacts} from '@/api/home'
import {debounce, setResourcesShow, processNext, upLoadAdjustPoint,} from "@/utils/tool";
import {useStore} from "vuex";
import {upLoadInputPoint, upLoadPoint} from "@/api/my";

export default {
  setup() {
    const {t} = useI18n()
    const store = useStore()
    const selectDataOne = ref([])
    const dialogRetentionShow = ref(false)
    const selectDataTwo = ref([])
    const selectDataThree = ref([])
    const selectDataFour = ref([])
    let contactsInfo = reactive({
      relation: null,
      name: null,
      mobile: null,
      relation_spare: null,
      name_spare: null,
      mobile_spare: null,
      contactscolFourRelation: null,
      contactscolFourName: null,
      contactscolFourPhone: null,
      contactscolThreePhone: null,
      contactscolThreeRelation: null,
      contactscolThreeName: null,
    })
    const router = useRouter()
    const resourcesShow = ref({})
    // 担保联系人
    let relationSheet = reactive({
      relationShow: false,
      contactscolFourRelation_text: '',
      relationConfirm: ({key, value}) => {
        contactsInfo.contactscolFourRelation = key
        relationSheet.contactscolFourRelation_text = value
        relationSheet.relationShow = false
      },
      relationClick: () => {
        relationSheet.relationShow = true
      }
    })
    // 其他联系人1
    let relationsSpareSheet = reactive({
      relationsSpareShow: false,
      relation_spare_text: '',
      relationsSpareConfirm: ({key, value}) => {
        contactsInfo.relation = key
        relationsSpareSheet.relation_spare_text = value
        relationsSpareSheet.relationsSpareShow = false
      },
      relationsSpareClick: () => {
        relationsSpareSheet.relationsSpareShow = true
      }
    })
    // 其他联系人2
    let relationsTwoSheet = reactive({
      relationsTwoShow: false,
      relationsTwoText: '',
      relationsTwoConfirm: ({key, value}) => {
        contactsInfo.relation_spare = key
        relationsTwoSheet.relationsTwoText = value
        relationsTwoSheet.relationsTwoShow = false
      },
      relationsTwoClick: () => {
        relationsTwoSheet.relationsTwoShow = true
      }
    })
    // 其他联系人3
    let relationsThreeSheet = reactive({
      relationsThreeShow: false,
      relationsThreeText: '',
      relationsThreeConfirm: ({key, value}) => {
        contactsInfo.contactscolThreeRelation = key
        relationsThreeSheet.relationsThreeText = value
        relationsThreeSheet.relationsThreeShow = false
      },
      relationsThreeClick: () => {
        relationsThreeSheet.relationsThreeShow = true
      }
    })

    const verificationInfo = () => {
      let message = ''
      if (!contactsInfo.contactscolFourRelation) return message = t('请选择担保人关系')
      if (!contactsInfo.contactscolFourName) return message = t('请输入担保人姓名')
      if (!contactsInfo.contactscolFourPhone) return message = t('请输入担保人手机号码')
      if (!contactsInfo.relation) return message = t('请选择')+ t('联系人2')
      if (!contactsInfo.name) return message = t('请输入姓名')
      if (!contactsInfo.mobile) return message = t('请输入手机号码')
      if (!contactsInfo.relation_spare) return message = t('请选择') + t('联系人2')
      if (!contactsInfo.name_spare) return message = t('请输入姓名')
      if (!contactsInfo.mobile_spare) return message = t('请输入手机号码')
      if (!contactsInfo.contactscolThreeRelation) return message = t('请选择') + t('联系人3')
      if (!contactsInfo.contactscolThreeName) return message = t('请输入姓名')
      if (!contactsInfo.contactscolThreePhone) return message = t('请输入手机号码')
      return message
    }
    const confirm = debounce(
        async () => {
          if (!verificationInfo()) {
            const res = await saveContacts(contactsInfo)
            if (res.code === 1) {
              Toast({
                message: t('提交成功')
              })
              confirmPoint(0)
              processNext('contactsInfo')
              upLoadAdjustPoint({eventName:'rhzv0b'})
            }
          } else {
            upLoadPoint({type: 11})
            Toast({
              message: verificationInfo()
            })
          }
        }
    )
    //获取关系下拉
    const getSelect = async () => {
      const res = await personalInfoSelect()
      selectDataOne.value = res.data.filter(item => item.type === 8)
      selectDataTwo.value = res.data.filter(item => item.type === 19)
      selectDataThree.value = res.data.filter(item => item.type === 10)
      selectDataFour.value = res.data.filter(item => item.type === 21)
    }
    // 流程显示隐藏
    const getResourcesShow = async () => {
      resourcesShow.value = await setResourcesShow(4)
      // 清除loading
      store.dispatch('changeLoading', false)
    }

    // 提交埋点数据
    function confirmPoint(detailType) {
      upLoadInputPoint({
        type: 3,
        detailType: detailType
      })
    }
    function handleClickLeft() {
      upLoadPoint({type: 10})
      dialogRetentionShow.value = true
    }
    onMounted(()=>{
      getResourcesShow()
      getSelect()
    })
    return {
      ...toRefs(contactsInfo),
      ...toRefs(relationSheet),
      ...toRefs(relationsSpareSheet),
      ...toRefs(relationsThreeSheet),
      ...toRefs(relationsTwoSheet),
      handleClickLeft,
      confirmPoint,
      selectDataOne,
      selectDataTwo,
      selectDataThree,
      selectDataFour,
      resourcesShow,
      confirm,
      dialogRetentionShow
    }
  },
}
</script>

<style scoped lang="less">
.contactsInfo {
  overflow: auto;
  .title_round {
    background-color: #FDA003;
    height: 6px;
    width: 6px;
    display: inline-block;
    transform: rotateZ(47deg);
    vertical-align: middle;
    margin-right: 5px;
  }
  .wrapper {
    box-sizing: border-box;
    background-color: #FFFFFF;
    margin-bottom: 20px;
    padding-bottom: 15px;

    .wrapper_title {
      padding: 10px 20px;
      font-size: 18px;
      background-color: #FFC09C;
      display: inline-block;
      border-radius: 0 20px 20px 0;
      margin-bottom: 15px;
    }
  }
}
</style>
